<!-- pages/category/index.vue -->
<template>
  <tm-app>
    <view class="container">
      <!-- 标题 -->
      <tm-text label="选择你喜欢的音乐类型" :font-size="44" class="title" />
      <tm-text label="至少选择3个分类" color="grey" class="subtitle" />

      <!-- 分类列表 -->
      <view class="category-grid">
        <view 
          v-for="(item,index) in cateList" 
          :key="item.categoryId"
          class="category-item"
          :class="{ active: selectedIds.includes(item.categoryId) }"
          :style="{
            backgroundColor: selectedIds.includes(item.categoryId) ? `${categories[index].color}15` : '#fff',
            borderColor: selectedIds.includes(item.categoryId) ? `${categories[index].color}` : '#eee'
          }"
          @click="toggleCategory(item.categoryId)"
        >
          <!-- <tm-icon 
            :name="item.icon" 
            :font-size="60" 
            :color="selectedIds.includes(item.categoryId) ? `${categories[index].color}` : 'grey'"
          /> -->
          <tm-text 
            :label="item.categoryName" 
            :font-size="28" 
            :color="selectedIds.includes(item.categoryId) ? `${categories[index].color}` : 'grey'"
            class="mt-20"
          />
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="fixed-footer">
        <tm-button 
          label="开始探索" 
          block 
          :disabled="selectedIds.length < 3"
          @click="confirmSelection"
        />
      </view>
    </view>
  </tm-app>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getCateList,updateUserCate } from '@/api/index'

// 分类数据（带颜色配置）
const categories = ref([
  {
    id: 1,
    name: '流行',
    icon: 'tmicon-music',
    color: '#FF6B6B', // 珊瑚红
    textColor: '#FFF'  // 白色文字
  },
  {
    id: 2,
    name: '摇滚',
    icon: 'tmicon-guitar',
    color: '#FFD93D', // 阳光黄
    textColor: '#333'
  },
  {
    id: 3,
    name: '电子',
    icon: 'tmicon-headphone',
    color: '#6C5B7B', // 紫罗兰
    textColor: '#FFF'
  },
  {
    id: 4,
    name: '古典',
    icon: 'tmicon-piano',
    color: '#355C7D', // 深海蓝
    textColor: '#FFF'
  },
  {
    id: 5,
    name: '爵士',
    icon: 'tmicon-saxophone',
    color: '#C06C84', // 莓果红
    textColor: '#FFF'
  },
  {
    id: 6,
    name: '民谣',
    icon: 'tmicon-leaf',
    color: '#96CEB4', // 薄荷绿
    textColor: '#333'
  },
  {
    id: 7,
    name: '说唱',
    icon: 'tmicon-mic',
    color: '#4ECDC4', // 浅海蓝
    textColor: '#333'
  },
  {
    id: 8,
    name: '乡村',
    icon: 'tmicon-tree',
    color: '#45B7D1', // 天蓝色
    textColor: '#FFF'
  },
  {
    id: 9,
    name: 'R&B',
    icon: 'tmicon-note',
    color: '#D4A5A5', // 玫瑰粉
    textColor: '#333'
  },
  {
    id: 10,
    name: '金属',
    icon: 'tmicon-settings',
    color: '#4B4B4B', // 炭黑
    textColor: '#FFF'
  },
  {
    id: 11,
    name: '古风',
    icon: 'tmicon-feather',
    color: '#D9BF77', // 古铜金
    textColor: '#333'
  },
  {
    id: 12,
    name: '电音',
    icon: 'tmicon-flash',
    color: '#FF9A8B', // 蜜桃橙
    textColor: '#333'
  },
  {
    id: 13,
    name: '轻音乐',
    icon: 'tmicon-cloud',
    color: '#A8E6CF', // 冰河蓝
    textColor: '#333'
  },
  {
    id: 14,
    name: '嘻哈',
    icon: 'tmicon-flag',
    color: '#FFAAA5', // 浅珊瑚
    textColor: '#333'
  },
  {
    id: 15,
    name: '独立',
    icon: 'tmicon-star',
    color: '#DCEDC1', // 嫩芽绿
    textColor: '#333'
  }
])


// 用户选择
const selectedIds = ref([])

// 切换选择（保持不变）
const toggleCategory = (id) => {
  const index = selectedIds.value.indexOf(id)
  if (index === -1) {
    selectedIds.value.push(id)
  } else {
    selectedIds.value.splice(index, 1)
  }
}

// 确认选择（保持不变）
const confirmSelection = () => {
  // uni.setStorageSync('selectedCategories', selectedIds.value)
  let userinfo = uni.getStorageSync('userinfo')
  updateUserCate(selectedIds.value).then(res => {
    console.log(res)
  })

  uni.reLaunch({ url: '/pages/index/index' })
}

const cateList = ref([])

// 检查登录和分类状态（保持不变）
onShow(() => {
  getCateList().then(res => {
    console.log(res)
    cateList.value = res.data.rows
  })
})
</script>

<style lang="scss">
.container {
  padding: 40rpx;
}

.title {
  text-align: center;
  margin-bottom: 16rpx;
}

.subtitle {
  text-align: center;
  margin-bottom: 60rpx;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rpx;
  
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    border: 2rpx solid;
    border-radius: 16rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &.active {
      transform: scale(1.08);
      box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
      .tm-icon {
        animation: bounce 0.4s ease;
      }
    }
  }
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
}

.mt-20 {
  margin-top: 20rpx;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}
</style>
